<template>
  <div class="addAddress-view">
    <van-nav-bar title="添加地址" left-arrow fixed @click-left="navigateAddress" />
    <div class="main-wrapper">
      <van-cell-group :border="false">
        <van-field v-model="contactPerson" label="联系人" placeholder="用于取餐时对您的称呼" />
        <van-cell title="性别" class="gender">
          <van-radio-group v-model="gender" direction="horizontal">
            <van-radio name="1" clickable @click="radio = '1'">先生</van-radio>
            <van-radio name="2" clickable @click="radio = '2'">女士</van-radio>
          </van-radio-group>
        </van-cell>
        <van-field v-model="tel" type="tel" label="手机号" placeholder="请输入手机号" />
        <van-field
          v-model="address"
          label="地址"
          :placeholder="productAddress"
          :readonly="true"
          is-link
          arrow-direction
          clickable
          @click="goSelectAddressArea"
        />
        <van-field v-model="doorNumer" label="门牌号" placeholder="如：5号楼208室" />
      </van-cell-group>
      <van-cell center title="设置默认地址">
        <template #right-icon>
          <van-switch v-model="checked" size="24" />
        </template>
      </van-cell>
      <van-button round type="info" @click="saveAddressInfo">保存</van-button>
      <van-popup v-model="show" round position="bottom" :style="{ height: '30%' }">
        <van-area
          title="请选择"
          :area-list="areaList"
          :columns-num="3"
          :visible-item-count="3"
          @cancel="hideAreaList"
          @confirm="getAreaListValue"
        />
      </van-popup>
    </div>
  </div>
</template>
<script>
import AreaList from "./area-list";
let _ = require("lodash");

export default {
  data() {
    return {
      gender: "1",
      tel: "",
      contactPerson: "",
      tagText: "",
      address: "",
      doorNumer: "",
      show: false,
      productAddress: "选择收获地址",
      areaList: AreaList,
      id: "0",
      addressInfoArr: [],
      checked: "1"
    };
  },
  methods: {
    navigateAddress() {
      this.$router.push("/address");
    },
    goSelectAddressArea() {
      this.show = true;
    },
    saveAddressInfo() {
      let addressInfo = {};
      let id = ++this.id;
      addressInfo.id = id;
      addressInfo.tel = this.tel;
      addressInfo.name = this.contactPerson;
      addressInfo.address = this.address + this.doorNumer;
      // this.addressInfoArr.push(JSON.stringify(addressInfo));
      this.$store.commit("setAddressInfoArr", addressInfo);
      this.$toast.success("保存成功");
      var that = this;
      setTimeout(function() {
        that.$router.push("/address");
      }, 2500);
    },
    hideAreaList() {
      this.show = false;
    },
    getAreaListValue(value) {
      this.productAddress = "";
      let addressArr = [];
      value.forEach(element => {
        addressArr.push(element.name);
      });
      this.address = _.uniq(addressArr).join(" ");
      this.show = false;
    }
  }
};
</script>
<style lang="less">
.addAddress-view {
  background-color: #efefef;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  .main-wrapper {
    .van-cell-group {
      margin-bottom: 10px;
      margin-top: 56px;
      .gender {
        .van-cell__title {
          flex: 0.35;
        }
      }
      .address-tag {
        .van-cell__title {
          flex: 0.35;
        }
        .van-cell__value {
          text-align: left;
        }
        .van-tag {
          width: 30px;
          justify-content: center;
          font-size: 12px;
          background-color: #efeded;
          margin-left: 5px;
          &:nth-child(1) {
            margin-left: 0;
          }
        }
      }
    }
    .van-button {
      margin-bottom: 20px;
      width: 94%;
      position: fixed;
      bottom: 0;
      left: 3%;
      background-color: #426496;
      border-color: #426496;
    }
  }
}
</style>